<template>
    <el-container>
        <el-header>Header</el-header>
        <el-container>
            <el-aside style="overflow-x: hidden;width: 256px;">
                <div class="user-info">
                    <div class="collapse-transition"><font-awesome-icon icon="align-justify"  style="display: block;height: 56px;width:56px;float:right;color:#fff;"/></div>
                    <img src="../assets/logo.png" alt="">
                    <!--<a>宋丹丹</a>-->
                    <!--<a>技术主管</a>-->
                </div>
                <div class="line"></div>
                <el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">
                    <el-radio-button :label="false">展开</el-radio-button>
                    <el-radio-button :label="true">收起</el-radio-button>
                </el-radio-group>
                <el-menu default-active="1-4-1"
                         class="el-menu-vertical-demo"
                         @open="handleOpen"
                         @close="handleClose"
                         :collapse="isCollapse">
                    <el-submenu index="1">
                        <template slot="title">
                            <i class="el-icon-location"></i>
                            <span slot="title">导航一</span>
                        </template>
                        <el-menu-item-group>
                            <span slot="title">分组一</span>
                            <el-menu-item index="1-1">选项1</el-menu-item>
                            <el-menu-item index="1-2">选项2</el-menu-item>
                        </el-menu-item-group>
                        <el-menu-item-group title="分组2">
                            <el-menu-item index="1-3">选项3</el-menu-item>
                        </el-menu-item-group>
                        <el-submenu index="1-4">
                            <span slot="title">选项4</span>
                            <el-menu-item index="1-4-1">选项1</el-menu-item>
                        </el-submenu>
                    </el-submenu>
                    <el-menu-item index="2">
                        <i class="el-icon-menu"></i>
                        <span slot="title">导航二</span>
                    </el-menu-item>
                    <el-menu-item index="3" disabled>
                        <i class="el-icon-document"></i>
                        <span slot="title">导航三</span>
                    </el-menu-item>
                    <el-menu-item index="4">
                        <i class="el-icon-setting"></i>
                        <span slot="title">导航四</span>
                    </el-menu-item>
                </el-menu>
            </el-aside>
            <el-container>
                <el-main><router-view/></el-main>
                <el-footer>Footer</el-footer>
            </el-container>
        </el-container>
    </el-container>
</template>

<style>
    #app>section{
        height: 100%;
    }
    .user-info{
        height: 236px;
    }
    .line{
        border:1px solid #9c9c9c;
    }
    .user-info img{
        width: 96px;
        height: 96px;
        border-radius: 50%;
        display: block;
        border: 1px solid #fff;
        margin: auto;
    }
    .user-info a{
        display: block;
        text-align: center;
        color:#fff;
        height: 30px;
    }
    .collapse-transition{
        height: 56px;
    }
    .el-header {
        /*background-color: rgb(84, 92, 100);*/
        background-color:rgba(50, 192, 138, 1);
        color: #fff;
        text-align: center;
        line-height: 60px;
    }
    .el-footer {
        /*background-color: rgb(84, 92, 100);*/
        background:linear-gradient(180deg,rgba(0,23,45,1) 0%,rgba(4,28,51,1) 100%);
        color: #fff;
        text-align: center;
        line-height: 60px;
    }

    .el-aside {
        background-color:rgba(4,28,51,1);
        color: #333;
        text-align: center;
        line-height: 200px;
        margin-top: -60px;
    }

    .el-main {
        background-color: #E9EEF3;
        color: #333;
        text-align: center;
        line-height: 160px;
    }

    body > .el-container {
        margin-bottom: 40px;
    }
    .el-menu{
        border-right: none;
    }
    .el-container:nth-child(5) .el-aside,
    .el-container:nth-child(6) .el-aside {
        line-height: 260px;
    }

    .el-container:nth-child(7) .el-aside {
        line-height: 320px;
    }
    .el-menu-vertical-demo:not(.el-menu--collapse) {
        width: 256px;
        min-height: 400px;
    }
</style>


<script>
    export default {
        data() {
            return {
                isCollapse: true
            };
        },
        methods: {
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            }
        }
    }
</script>

<style scoped>

</style>
